<template>
  <div @click="onItemTap(books.id)" class="item-container">
    <img class="item-img" :src="books.image">
    <div class="description">
      <span class="title">{{books.title}}</span>
      <span class="author">{{books.author}}</span>
      <div class="foot">
        <span class="footer">{{books.fav_nums}}  喜欢</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BookItem',
  props: {
    books: Object
  },
  methods: {
    onItemTap (bid) {
      window.removeEventListener('scroll', this.$_pullDownRefresh)
      this.$router.push({path: `/book-detail${bid}`, query: {bookId: bid}})
      this.$store.dispatch('showHeadBack', 1)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .item-container
    margin-top: .3rem
    display: flex
    position: relative
    box-shadow: 2px 2px 3px #e3e3e3
    flex-direction: column
    width: 2.4rem
    height: 3.6rem
    .item-img
      width: 100%
      height: 100%
      border-radius: 2px
    .description
      width: 2.16rem
      position: absolute
      bottom: 0
      background-color: #fff
      padding: .05rem .1rem .08rem .15rem
      font-size: .24rem
      display: flex
      flex-direction: column
      border-bottom-right-radius: 2px
      border-bottom-left-radius: 2px
      .title
        margin-top: .1rem
        text-overflow: ellipsis
        white-space: nowrap
        overflow: hidden
      .author
        font-size: .2rem
        color: #999999
        margin-bottom: .1rem
        text-overflow: ellipsis
        white-space: nowrap
        overflow: hidden
      .foot
        font-size: .2rem
        display: flex
        flex-direction: row
        justify-content: flex-end
      .footer
        color: #666666
</style>
